<template>
  <div class="container">
    <div class="good_box" v-if="type == 1">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
          <div class="good_content">{{ item.content }}</div>
          <div class="good_pic">${{ item.id }}</div>
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 2">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 3">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 4">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list_4" v-for="item in itemCh" :key="item.id">
        <div class="type_4">
          <div class="title">
            {{ item.name }}
          </div>
          <div v-for="item2 in item.list2" :key="item2.id" class="type_4_list">
            <span class="name">{{ item2.name }}</span>
            <span class="price">{{ item2.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 5">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
          <!-- <div class="good_content">{{ item.content }}</div> -->
          <div class="good_pic" style="margin-top: 10px">
            ${{ item.price || 999 }}
          </div>
        </div>
      </div>
    </div>
    <div class="" v-if="type == 6" style="padding: 0 10px">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="comment_box" v-for="item in list" :key="item.id">
        <div>
          <div class="top">
            <div class="user_info">
              <img class="user_head" :src="item.icon" alt="" />
              <div class="name_bx">
                <div class="name">{{ item.nickname }}</div>
                <div class="date">{{ item.date }}</div>
              </div>
            </div>
            <div>
              <van-rate
                v-model="item.star"
                :size="18"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
          </div>
          <div class="content_comment">
            <div class="text">{{ item.content }}</div>
            <div v-if="item.pics">
              <van-row>
                <van-col
                  span="8"
                  v-for="(itemImg, index) in item.pics"
                  :key="index"
                >
                  <img
                    style="
                      width: 82px;
                      height: 82px;
                      border-radius: 5px;
                      margin-bottom: 10px;
                    "
                    :src="itemImg"
                    alt=""
                /></van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 7">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
        </div>
      </div>
    </div>
    <div class="good_box" v-if="type == 8">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="content_text">{{ content || "" }}</div>
    </div>
    <div class="good_box" v-if="type == 9">
      <!-- // 1 商家活动 2 图片菜单 3 电子菜单 4价目表 5.本店热卖 6.评论 7.商家相册 8.主营产品 9商家推荐 10小图展示 11大图展示 -->
      <div class="good_list good_list_1" v-for="item in itemCh" :key="item.id">
        <div class="type_1">
          <img class="good_img" :src="item.pic" alt="" />
          <div class="good_content">{{ item.content }}</div>
          <div
            style="
              text-align: left;
              width: 100%;
              display: flex;
              align-items: center;
            "
          >
            <img
              style="width: 21.5px; height: 24px"
              src="@/assets/imgs/dingwei.png"
              alt=""
            />
            <div class="good_content_loca">
              {{ item.location }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "menuList",
  props: {
    itemCh: {
      type: Array,
    },
    type: {
      type: Number,
    },
    content: {
      type: String,
    },
  },
  computed: {
    list() {
      this.itemCh.forEach((item) => {
        if (item.star) {
          item.star = Number(item.star);
        }
      });
      return this.itemCh || [];
    },
  },
  data() {
    return {
      details: {},
    };
  },
  mounted() {},
};
</script>
<style lang="scss">
.container {
  box-sizing: border-box;
  .content_text {
    color: #666666;
    font-size: 14px;
  }
  .comment_box {
    .content_comment {
      .text {
        color: #666666;
        font-size: 14px;
        margin: 8px 0;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      .user_info {
        display: flex;
        align-items: center;
        .name_bx {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 35.5px;
          .name {
            color: #333;
            font-size: 13px;
          }
          .date {
            color: #c6c6c6;
            font-size: 12px;
          }
        }
        .user_head {
          width: 35.5px;
          height: 35.5px;
          border-radius: 5px;
          margin-right: 9.5px;
        }
      }
    }
  }
  .good_list_4 {
    width: 100%;
    box-sizing: border-box;

    .type_4 {
      width: 100%;
      box-sizing: border-box;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 15px;
      border: 1px solid #e6e6e6;
      .type_4_list {
        padding: 18px 15px;
        display: flex;
        justify-content: space-between;
        .price {
          color: #ff4242;
          font-size: 15px;
        }
        .name {
          color: #666;
          font-size: 14px;
        }
      }
      .title {
        padding: 0 15px;
        height: 34px;
        width: 100%;
        color: #000;
        background: #fafafa;
        box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03);
        border-radius: 13px 13px 0px 0px;
        line-height: 34px;
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
  .good_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    .good_list {
      width: 48%;
      margin-bottom: 14.5px;
      .good_content_loca {
        color: #c6c6c6;
        font-size: 12px;
        width: 100%;

        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap;
      }
      .type_1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .good_pic {
        color: #ff4242;
        font-size: 15px;
        font-weight: 500;
        width: 100%;
        text-align: left;
      }
      .good_img {
        width: 135px;
        height: 95px;
        border-radius: 8px 8px 0px 0px;
      }
      .good_content {
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap;
        color: #333;
        font-size: 13px;
        margin: 13px 0;
      }
    }
  }
}
</style>
